<template>
  <div class="new-page home">
    <div class="top">
      <a-config-provider :autoInsertSpaceInButton="false">
        <a-button
          type="primary"
          size="large"
          :autoInsertSpaceInButton="false"
          style="border-radius:0px;width:96px"
          @click="showModal"
        >新增</a-button>
      </a-config-provider>
    </div>
    <div class="center">
      <div class="title">施工单位食堂门口
          <a-icon type="edit" class="a-icon" @click="onEdit"/>
      </div>
      <div class="content flexStart">
        <div>设立时间：2021年3月11日</div>
        <div>负责人：张晓</div>
        <div>最后更新时间：2021年3月11日</div>
      </div>
      <div class="img">
        <img src="@/assets/img/weiquan.png" width="327px" height="212px" alt />
      </div>

      <div class="title">员工宿舍
          <a-icon type="edit" class="a-icon" @click="onEdit"/>
      </div>
      <div class="content flexStart">
        <div>设立时间：2021年3月11日</div>
        <div>负责人：张晓</div>
        <div>最后更新时间：2021年3月11日</div>
      </div>
      <div class="img flexStart">
        <div>
          <img src="@/assets/img/weiquan.png" width="327px" height="212px" alt />
        </div>
        <div>
          <img src="@/assets/img/weiquan.png" width="327px" height="212px" alt />
        </div>
      </div>
    </div>
    <!-- 对话框 -->
    <a-modal v-model="visible" :title="modalTitle" @ok="handleOk" :maskClosable="false">
      <a-form-model
        ref="ruleForm"
        :model="form"
        :rules="rules"
        :label-col="labelCol"
        :wrapper-col="wrapperCol"
        v-if="visible"
      >
        <a-form-model-item ref="name" label="地点" prop="name">
          <a-input
            v-model="form.name"
            @blur="
          () => {
            $refs.name.onFieldBlur();
          }
        "
          />
        </a-form-model-item>

        <a-form-model-item ref="obj" label="设立时间" prop="obj">
          <a-input
            v-model="form.obj"
            @blur="
          () => {
            $refs.obj.onFieldBlur();
          }
        "
          />
        </a-form-model-item>

        <a-form-model-item ref="result" label="负责人" prop="result">
          <a-input
            v-model="form.result"
            @blur="
          () => {
            $refs.obj.onFieldBlur();
          }
        "
          />
        </a-form-model-item>

        <a-form-model-item label="备注">
          <a-input v-model="form.desc" type="textarea" />
        </a-form-model-item>

        <a-form-model-item label="维权信息告示牌" prop="formUpload">
          <div class="clearfix">
            <a-upload
              action="https://www.mocky.io/v2/5cc8019d300000980a055e76"
              list-type="picture-card"
              :file-list="fileList"
              @preview="handlePreview"
              @change="handleChange"
              :before-upload="beforeUpload"
            >
              <div v-if="fileList.length < 8">
                <a-icon type="plus" />
                <div class="ant-upload-text">上传</div>
              </div>
            </a-upload>
            <a-modal :visible="previewVisible" :footer="null" @cancel="handleCancel">
              <img alt="example" style="width: 100%" :src="previewImage" />
            </a-modal>
          </div>
        </a-form-model-item>
      </a-form-model>
    </a-modal>
  </div>
</template>

<script>
function getBase64(file) {
  return new Promise((resolve, reject) => {
    const reader = new FileReader();
    reader.readAsDataURL(file);
    reader.onload = () => resolve(reader.result);
    reader.onerror = error => reject(error);
  });
}
export default {
  data() {
    let formUpload = (rule, value, callback) => {
        // console.log(this.fileList.length);
        
      if (this.imgupload ==false) {
        callback(new Error("请上传图片"));
      } else {
        this.$refs.ruleForm.validateField("formUpload");
        callback();
      }
    };
    return {
      modalTitle: "新增维权广告牌",
      visible: false,
      labelCol: { span: 6 },
      wrapperCol: { span: 12 },
      form: {
        name: "",
        obj: "",
        result: "",
        desc: ""
      },
      previewVisible: false,
      previewImage: "",
      fileList: [],
      imgupload:false,
      rules: {
        name: [
          {
            required: true,
            message: "请输入地点",
            trigger: "change"
          }
        ],
        obj: [
          {
            required: true,
            message: "请输入设立时间",
            trigger: "change"
          }
        ],
        result: [
          {
            required: true,
            message: "请输入负责人",
            trigger: "change"
          }
        ],
        formUpload: [
          { required: true, validator: formUpload, trigger: "change" }
        ]
      }
    };
  },
  methods: {
    onEdit() {
      this.modalTitle = "编辑维权广告牌";
      this.visible = true;
    },
    showModal() {
      this.visible = true;
    },
    handleOk(e) {
      this.pdfData = "";
      this.$refs.ruleForm.validate(valid => {
        if (valid) {
          // alert('submit!');
          this.visible = false;
        } else {
          // console.log('error submit!!');
          return false;
        }
      });
    },
    handleCancel() {
      this.previewVisible = false;
    },
    async handlePreview(file) {
      console.log(1111);

      if (!file.url && !file.preview) {
        file.preview = await getBase64(file.originFileObj);
      }
      this.previewImage = file.url || file.preview;
      this.previewVisible = true;
    },
    handleChange({ fileList }) {
      this.fileList = fileList;
      
      
    },
    beforeUpload(file) {
        this.imgupload=true
    },
    // getBase64(file) {
    //   return new Promise((resolve, reject) => {
    //     const reader = new FileReader();
    //     reader.readAsDataURL(file);
    //     reader.onload = () => resolve(reader.result);
    //     reader.onerror = error => reject(error);
    //   });
    // }
  }
};
</script>

<style scope lang="less">
.home {
  font-size: 20px;
  font-family: Microsoft YaHei;
  font-weight: bold;
  color: #333333;
}
.top {
  margin-bottom: 10px;
  background: #fff;
  padding: 18px 30px;
}
.center {
  padding: 15px 30px;
  background: #fff;
}
.title {
  font-size: 20px;
  color: #333333;
  height: 50px;
  padding-top: 11px;
  line-height: 31px;
  border-bottom: 1px solid #e4e4e4;
  padding-bottom: 19px;
  margin-bottom: 25px;
}
.content {
  font-weight: 400;
  color: #999999;
  // line-height: 31px;
  font-size: 16px;
  margin-bottom: 30px;
}
.content div {
  margin-right: 60px;
}
.img {
  width: 327px;
  height: 212px;
  margin-bottom: 30px;
}
.img div {
  margin-right: 44px;
}
.ant-upload-select-picture-card i {
  font-size: 32px;
  color: #999;
}

.ant-upload-select-picture-card .ant-upload-text {
  margin-top: 8px;
  color: #666;
}
.a-icon{
    cursor: pointer;
}
</style>